Skip to main content

Drawings Configuration

This document provides an overview of configuration options for drawings in ChartReactConfig. Below, you will find detailed instructions to configure drawings for your application.

Config Overview​

Configuration for drawings can be found in ChartReactConfig.

export interface PartialDrawingsConfig {
    drawingsList?: DrawingGroup[];
    toolbar?: {
        enabled?: boolean;
    };
    sidebar?: {
        enabled?: boolean;
    };
    limitOfDrawings?: number;
    /**
     * Important!
     * Couldn't be used along with object tree(layers) component
     */
    drawingGroups?: {
        enabled?: boolean;
    };
}

You can determine the visibility of the drawing tools in the sidebar or the toolbar by passing a flag.

By default sidebar drawings are enabled, and toolbar drawings disabled.

For example, you pass enabled: false in config for sidebar, and you will see chart without drawings:

If you want to have a list of drawings in toolbar, please pass enabled: false for sidebar and pass enabled: true for toolbar in config:

List of Drawings​

Control the list of drawings available in your application by setting the drawingsList value. Provide an array of drawing names to create a simple list of drawings.

To create a custom list of drawings, pass your custom drawings list:

drawingsList: [
	{
		groupName: 'Your group name 1',
		drawings: ['line', 'extended_line'],
	},
	{
		groupName: 'Your group name 2',
		drawings: ['rectangle', 'arc'],
	},
];

This will display a chart with two groups containing four drawings.

Limit of Drawings​

You can configure the maximum number of drawings that can be added to the chart. If the limit is reached, a notification will appear at the top of the chart.

Drawing Groups​

Enable an input for creating custom drawing groups in the configuration.

drawingGroups: {
	enabled: true;
}

With this setting, a selectbox will appear at the bottom-right of the chart, allowing you to create new drawing groups.

Further reading​